<template>
	<view class="content">
		<view class="store">
			<!-- 店铺 -->
			<image src="../../static/店铺.png" class="store_image"></image>
			<text class="order.storeName">{{storeName}}</text>
		</view>
		<view class="goods_box">
			<view class="goods_image" >
				<image :src="order.goodsImage"></image>
			</view>
			<view class="description">
				<view>{{order.goodsName}}</view>
				<view>{{order.goodsParam}}</view>
			</view>
			<view class="goods_digit">
				<view>{{order.totalMoney}}</view>
				<view>x{{order.goodsNum}}</view>
			</view>
			<uni-icons @click="cancleOrderItem" type="minus-filled" size="30"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		props: {
			order: {
				storeName: '',
				goodsImage: '',
				goodsName: '',
				goodsParam: '',
				totalMoney: '',
				goodsNum: 0,
			}
		},
		watch: {
			order: {
				handler: function() {
					this.freshPage();
				},	
				deep: true
			}
		},
		methods: {
			cancleOrderItem() {
				this.$emit("cancleOrderItem", this.order.id, 0)
			},
			// 刷新页面
			freshPage() {
				console.log("我被执行了！！！")
				this.$forceUpdate()
			},
		}
	}
</script>

<style>
	.content {
		height: 250upx;
		width: 720upx;
		border-radius: 10upx;
		background-color: rgb(255, 255, 255);
		margin: 15upx 15upx;
		font-family: PingFangSC-Regular, sans-serif;
	}
	
	.store {
		line-height: 40upx;
	}
	
	.store_image {
		height: 40upx;	
		width: 40upx;
		margin: auto 0;
		vertical-align: middle;
	}
	
	.store text {
		vertical-align: middle;
	}
	
	.goods_box {
		width: 100%;
		display: flex;
		margin-top: 20upx;
		justify-content: space-between;
	}
	
	.goods_image image {
		width: 180upx;
		height: 180upx;
		margin-right: 30upx;
		flex-grow: 1;
	}
	
	.description {
		flex-grow: 2;
		display: flex;
		flex-direction: column;
	}
	
	.description :nth-child(1) {
		font-size: 30upx;
	}
	
	.description :nth-child(2) {
		font-size: 24upx;
		color: rgb(153, 153, 153);
	}
	
	.goods_digit {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
	}
	
	.goods_digit :nth-child(1) {
		font-size: 35upx;
		margin-right: 30upx;
		margin-left: auto;
	}
	
	.goods_digit :nth-child(2) {	
		color: rgb(153, 153, 153);
		font-size: 23upx;
		margin-right: 30upx;
		margin-left: auto;
	}
	
</style>
